<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" style="color:white;"> Employee Manager </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarColor02">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link cursor-pointer" (click)="onOpenModal(null, 'add')"> Add Employees <span class="sr-only">(current)</span> </a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input type="search" (ngModelChange)="searchEmployees(key.value)" #key="ngModel" ngModel
             name="key" id="searchName" class="form-control mr-sm-2" placeholder="Search employees..." required>
    </form>
  </div>
</nav>
<div class="container" id="main-container">
  <div class="row">
    <div *ngFor="let e of employees" class="col-md-6 col-xl-3">
      <div class="card m-b-30">
        <div class="card-body row">
          <div class="col-6">
            <a href=""><img src="{{e?.imageUrl}}" alt="" class="img-fluid rounded-circle w-60 h-60"></a>
          </div>
          <div class="col-6 card-title align-self-center mb-0">
            <h5>{{e?.name}}</h5>
            <p class="m-0">{{e?.jobTitle}}</p>
          </div>
        </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item"><i class="fa fa-envelope float-right"></i>{{e?.email}}</li>
          <li class="list-group-item"><i class="fa fa-phone float-right"></i>{{e?.phone}}</li>
        </ul>
        <div class="card-body">
          <div class="float-right btn-group btn-group-sm">
            <a (click)="onOpenModal(e, 'update')" class="btn btn-primary tooltips" data-placement="top" data-toggle="tooltip" data-original-title="Update"><i class="fa fa-pencil"></i> </a>
            <a  (click)="onOpenModal(e, 'delete')" class="btn btn-secondary tooltips" data-placement="top" data-toggle="tooltip" data-original-title="Delete"><i class="fa fa-times"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--    ADD-->
  <div class="modal fade" id="addEmployeeModal" tabindex="-1" role="dialog" aria-labelledby="addEmployeeModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="addEmployeeModalLabel">Add Employee</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form #addForm="ngForm" (ngSubmit)="onAddEmployee(addForm)">
            <div class="form-group">
              <label for="name">Name</label>
              <input type="text" ngModel name="name" class="form-control" id="name" placeholder="Name" required>
            </div>
            <div class="form-group">
              <label for="email">Email</label>
              <input type="email" ngModel name="email" class="form-control" id="email" placeholder="Enter email" required>
            </div>
            <div class="form-group">
              <label for="jobTitle">Job Title</label>
              <input type="text" ngModel name="jobTitle" class="form-control" id="jobTitle" placeholder="Enter job title" required>
            </div>
            <div class="form-group">
              <label for="phone">Phone</label>
              <input type="text" ngModel name="phone" class="form-control" id="phone" placeholder="Enter phone" required>
            </div>
            <div class="form-group">
              <label for="imageUrl">Image URL</label>
              <input type="text" ngModel name="imageUrl" class="form-control" id="imageUrl" placeholder="Enter image URL" required>
            </div>
            <div class="modal-footer">
              <button type="button" id="add-employee-from" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button [disabled]="addForm.invalid" type="submit" class="btn btn-primary">Save</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <!--    UPDATE-->
  <div class="modal fade" id="updateEmployeeModal" tabindex="-1" role="dialog" aria-labelledby="updateEmployeeModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="updateEmployeeModalLabel">Update Employee</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form #updateForm="ngForm">
            <div class="form-group">
              <label for="name">Name</label>
              <input type="text" ngModel="{{updateEmployee?.name}}" name="name" class="form-control" id="name" aria-describedby="emailHelp" placeholder="Name">
            </div>
            <input type="hidden" ngModel="{{updateEmployee?.id}}" name="id" class="form-control" id="id" placeholder="Email">
            <input type="hidden" ngModel="{{updateEmployee?.eCode}}" name="eCode" class="form-control" id="eCode" placeholder="Email">
            <div class="form-group">
              <label for="email">Email</label>
              <input type="email" ngModel="{{updateEmployee?.email}}" name="email" class="form-control" id="email" placeholder="Email">
            </div>
            <div class="form-group">
            <label for="jobTitle">Job Title</label>
            <input type="text" ngModel="{{updateEmployee?.jobTitle}}" name="jobTitle" class="form-control" id="jobTitle" placeholder="Job title">
          </div>
            <div class="form-group">
              <label for="phone">Phone</label>
              <input type="text" ngModel="{{updateEmployee?.phone}}" name="phone" class="form-control" id="phone" placeholder="Enter phone">
            </div>
            <div class="form-group">
              <label for="imageUrl">Image URL</label>
              <input type="text" ngModel="{{updateEmployee?.imageUrl}}" name="imageUrl" class="form-control" id="imageUrl" placeholder="Enter image URL">
            </div>
            <div class="modal-footer">
              <button type="button" id="" data-dismiss="modal" class="btn btn-secondary">Close</button>
              <button (click)="onUpdateEmployee(updateForm.value)" data-dismiss="modal" class="btn btn-primary">Save</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <!--    DELETE-->
  <div class="modal fade" id="deleteEmployeeModal" tabindex="-1" role="dialog" aria-labelledby="deleteEmployeeModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="deleteModalLabel">Delete Employee</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Are you sure you want to delete employee {{deleteEmployee?.name}}</p>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismisss="modal">No</button>
            <button (click)="onDeleteEmployee(deleteEmployee.id)" class="btn btn-danger" data-dismiss="modal">Yes</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!--NO EMPLOYEES-->
<div *ngIf="employees?.length == 0" class="col-lg-12 col-md-12 col-xl-12">
  <div class="alert alert-info" role="alert">
    <h4 class="alert-heading"> NO EMPLOYEES</h4>
    <p>No employees were found</p>
  </div>
</div>
